<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <link rel="preload" as="image" href="aa.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="bb.js" media="(min-width: 601px)">
</head>
<body>
<dialog open>
  <form method="dialog">
    <input type="text">
    <button type="submit" value="foo">提交</button>
  </form>
</dialog>
  <dialog open>Hello world</dialog>
  <meter id="fuel" name="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="20">
    at 50/100
</meter>
<p>烤箱的当前温度是<meter min="200" max="500"
  value="350"> 350 度</meter>。</p>
<label>宠物：
  <select name="pets" multiple size="4">
    <optgroup label="四条腿的宠物">
      <option value="dog">狗</option>
      <option value="cat">猫</option>
    </optgroup>
    <optgroup label="鸟类">
      <option value="parrot">鹦鹉</option>
      <option value="thrush">画眉</option>
    </optgroup>
  </select>
</label>

<label for="pet-select">宠物：</label>

<select id="pet-select" name="pet-select">
  <option value="">--请选择一项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="others">其他</option>
</select>

<input type="datetime-local" id="meeting-time"
       name="meeting-time" value="2018-06-12T19:30"
       min="2018-06-07T00:00" max="2018-06-14T00:00">
  
<input type="color" id="background" name="background"
           value="#e66465">

<input type="date" id="start" name="start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>


<input id="myURL" name="myURL" type="url"
       list="defaultURLs">

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs">
  <option value="http://www.google.com/" label="Google">
  <option value="http://www.microsoft.com/" label="Microsoft">
  <option value="https://www.mozilla.org/" label="Mozilla">
  <option value="http://w3.org/" label="W3C">
</datalist>

  <input type="range"id="start"name="volume"min="0"max="11">
<input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg">

<input type="email" size="40" list="defaultEmails">
<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

<fieldset>
  <legend>你的兴趣</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">编码</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">音乐</label>
  </div>
</fieldset>


<form>
  <fieldset>
    <p>年龄：<input type="text" name="age"></p>
    <p>性别：<input type="text" name="gender"></p>
  </fieldset>
</form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>
<table>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
    <th scope="col">性别</th>
  </tr>
  <tr>
    <th scope="row">张三</th>
    <td>001</td>
    <td>男</td>
  </tr>
  <tr>
    <th scope="row">李四</th>
    <td>002</td>
    <td>男</td>
  </tr>
</table>


    <table>
  <tr>
    <th>学号</th><th>姓名</th>
  </tr>
  <tr>
    <td>001</td><td>张三</td>
  </tr>
  <tr>
    <td>002</td><td>李四</td>
  </tr>
</table>
<iframe src="https://www.baidu.com"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.baidu.com">点击打开嵌入页面</a></p>
</iframe>
<picture>
<source media="(max-width: 500px)"srcset="aa.png">
<source media="(min-width: 501px)"srcset="bb.js">
<img src="bb.js"alt="cat">
</picture>
<input type="reset" value="重置">
<a href="demo.txt" download="demo.txt">下载demo.txt</a>
    
<a href="mailto:1197587433@qq.com">联系我们</a>
<a href="tel:13312345678">13312345678</a>

<a href="data:,Hello%2C%20World!" download="hello.txt">点击</a>

<a href="data:,Hello%2C%20World!">点击</a>

汉
<rp>(</rp> 
<rt>han</rt> 
<rp>)</rp>
字<rp>(</rp> <rt>zi</rt> <rp>)</rp>
</ruby>

<p>通过 TCP/IP 协议连接的全球性计算机网络，叫做<dfn title="全球性计算机网络">Internet</dfn>。</p>
<ins cite="./why.html" datetime="2018-05"><p>项目比原定时间提前两周结束。</p></ins>

<del><p>会议定于5月8日举行。</p></del>
<ins><p>会议定于5月9日举行。</p></ins>

    <abbr title="HyperText Markup Language">HTML</abbr>
    <main>
<p>作者的联系方式：</p>

<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>


<p>运动会预定<time datetime="2015-06-10">下周三</time>举行。</p>
<p>文章正文</p><p><small>以上内容使用创意共享许可证。</small></p>

<p>我们讨论以后决定，<mark>运行会在下周三举办</mark>。</p>





        <p>Windows 可以按下<kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Del</kbd></kbd>重启。</p>
        <p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重启。</p>
        <pre>
  <code>
    let a = 1;
    console.log(a);
  </code>
</pre>
        <code>alert()</code>的作用是让网页弹出一个提示框。
        <blockquote cite="https://quote.example.com"><p>天才就是 1% 的天赋和99%的汗水。</p></blockquote>
        <blockquote cite="https://quote.example.com"><p>天才就是 1% 的天赋和99%的汗水。</p></blockquote>
        <cite>-- 爱迪生</cite>
        <p>第一段</p><br><p>第二段</p>
    <article><header><h2>文章标题</h2><p>张三，发表于2010年1月1日</p></header></article>
    <p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
    <header>
        <h1>公司名称</h1>
        <ul>
            <li><a href="/home">首页</a></li>
            <li><a href="/about">关于</a></li>
            <li><a href="/contact">联系</a></li>
        </ul>
        <form target="/search">
                <input name="q"type="search"/>
            <input type="submit"/>
        </form>
    </header>
    </main>
    <aside>侧边栏</aside>
    <!-- <div id="ha" style="height: 1000px;width:1500px;background-color: red;"></div>
    <button id="hq">点击</button>
    <div title="版权说明">
    <p dir="rtl">本站内容使用创意共享许可证，可以自由使用。</p> -->
    <p>第一段</p> <aside><p>本段是文章的重点。</p></aside>
    <article>
        <h1>文章标题</h1>
        <section>
            <h2>第一章</h2>
            <p>...</p>
        </section>
        <section>
            <h2>第二章</h2><p>...</p>
        </section>
    </article>
     <h1>文章标题</h1>
        
            <h2>第一章</h2>
            <p>...</p>
  
            <h2>第二章</h2>
            <p>...</p>

<span translate="no">Wien<span>
named world's most liveable city (again)! 
</p>
</div>
</body>
</html>
<script>
  var a;
  console.log(a);
  a = 1;
  console.log('hello world');
</script>